<template>
	<el-dialog :title="title" :visible.sync="show" @close="onClose" width="30%" label-width="100px">
		<el-form :model="formData" :rules="rules" ref="ruleForm">
			<el-form-item label="名称" prop="name">
				<el-input v-model="formData.name" class="form-item-w" placeholder="请输入品牌名称"></el-input>
			</el-form-item>
			<el-form-item label="图片" prop="img">
				<template>
					<div class="upload-box _display_flex">
                        <div class="upload-item">
                            <div class="avatar-uploader avatar _display_flex" @click="handleUploadImg">
                                <img v-if="formData.img" :src="path + formData.img" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon avatar"></i>
                            </div>
                            <i class="upload-tab">60 x 60</i>
                        </div>
                    </div>
				</template>
			</el-form-item>
			<div class="button _display_flex" >
				<el-button type="success" size="mini" @click="onConfirm" >确定</el-button>
			</div>
		</el-form>
	</el-dialog>
</template>

<script>
	export default {
		name: 'AddBrand',
		title: '添加品牌',
		props: {
			show: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: '添加品牌'
			},
			id: {
				type: [String, Number],
				default: ''
			},
			callback: {
				type: Function,
			}
		},
		methods: {
			onClose() {
				document.body.removeChild(this.$el);
			},
			// 上传图片
			handleUploadImg() {
				this.$Upload({
					show: true,
					leng: 1,
					callback: (data) => {
						this.formData.img =  data[0]
					}
				})
			},
			// 确定
			onConfirm() {
				this.$refs['ruleForm'].validate((valid) => {
					if (valid) {
						this.getAddRedactBrand()
					} else {
						return false;
					}
				});
			},
			// 新增/编辑接口
			async getAddRedactBrand() {
				const data= this.formData
				const res = await this.$Http.getAddRedactBrand({ data })
				if(res){
					setTimeout(() => {
						let resData = this.id? data: res
						this.callback && this.callback(resData)
						this.show = false;
					}, 1000)
				}
			},
			// 详情
			async getBrandDetails() {
				let data = { id: this.id}
				let res = await this.$Http.getBrandDetails({ data })
				if(res) {
					this.formData = res
				}
			}
		},
		data() {
			return {
				formData: {
					name: '',
					img: '',
				},
				rules: {
					name: [
						{ required: true, message: '请输入品牌名称', trigger: 'blur' }
					],
					img: [
						{ required: true, message: '请选择品牌图片', trigger: 'blur' }
					]
				}
			}
		},
		mounted() {
			this.id && this.getBrandDetails()
		},
	}
</script>

<style lang="scss" scoped>
	.form-item-w{
		width: 200px;
		flex: 1;
	}
	.upload-box{
        .upload-item{
            margin-right: 10px;
            flex-direction: column;
        }
        .upload-tab{
			width: 100%;
			display: inline-block;
			line-height: 30px;
            font-size: $font-size-xs;
            color: $text-color-grey;
			text-align: center;
        }
        .avatar-uploader{
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            justify-content: center;
            &:hover {
                border-color: #409EFF;
            }
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                text-align: center;
            }
        }
        .avatar {
            width: 60px;
            height: 60px;
            line-height: 60px;
        }
    }
	.title {
		width: 100px;
		font-size: $font-size-md;
	}
	.button{
		margin-top: 30px;
		justify-content: flex-end;
	}
</style>